<template>
    <div class="type">
        <button :class="type === 1 && 'selected'" @click="selectType(1)">支出</button>
        <button :class="type === 2 && 'selected'" @click="selectType(2)">收入</button>
    </div>
</template>

<script lang="ts">
    import Vue  from 'vue';
    import { Component,Prop,Watch } from 'vue-property-decorator';
    @Component
    export default class Type extends Vue{
        // @Prop(Number) xxx : number | undefined;
        // TS更加严谨
        // TS编译成JS JS运行在浏览器上
        // Prop告诉Vue xxx不是data 是prop
        // Number告诉Vue xxx运行时是Number
        // number|undefined 告诉TS xxx编译时是number或undefined
        type:Number = 1;
        selectType(type:Number){
            if(type !== 1 && type !== 2 ){
                throw new Error('type is unknown');
            } else {
                this.type = type;
            }
        }

        @Watch('type')
        onTypeChanged(value:Number){
            this.$emit('update:value',value);
        }
    }

</script>

<style lang="scss" scoped>
    .type {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        height: 30px;
        font-size:16px;
        button {
            height: 100%;
            background-color: #F2F2F2;
            padding:0 40px;
            font-size: inherit;
            &:first-child {
                border-radius:  (30px/2) 0 0  (30px/2);
            }
            &:last-child {
                border-radius:  0  (30px/2)  (30px/2) 0;
            }
            &.selected {
                background-color: #D7D7D7;
            }
        }
    }
</style>